<script setup>

</script>

<template>
  <!--v-for="item in 20" :key="item"-->
  <div class="cube" v-for="item in 20" :key="item">
<!--    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="detail">
      相册描述:真的好开心真的好开心真的好开心真的好开心真的好开心真的好开心。
      <br/>
      创建日期: xxx
      <br/>
      共有照片: 666
      <br/>
      创建地点: xxx
    </div>-->

  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.cube{
  position: relative;
  text-align: left;
  float: left;
  border: 1px skyblue solid;
  width: 20%;
  float: left;
  height: 60%;
  margin: 20px;
}
.detail{
  position: relative;
  width: 140px;
  height: 55%;
  top: 25%;
  word-wrap: break-word;
  color: #000000;
}

ul {
  width: 60px;
  height: 60px;
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  /*3d空间*/
  transform-style: preserve-3d;
  animation: box 20s linear infinite;
}

@keyframes box {

  /*3d旋转 x y z deg*/
  from {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  to {
    transform: rotate3d(1, 1, 1, 360deg);
  }
}

li {
  width: 120px;
  height: 120px;
  list-style: none;
/*  border: 1px solid black;*/
  position: absolute;
  opacity: 0.8;
  box-shadow: 0px 0px 10px white;
}

li:nth-child(1) {
  background: url(../img/danji.jpg);
  background-position: center;
  background-size: cover;
  transform: translateZ(60px);
}

/*后*/
li:nth-child(2) {
  background: url(../img/donghuang.jpg);
  background-position: center;
  background-size: cover;
  transform: translateZ(-60px);
}

/*左*/
li:nth-child(3) {
  background: url(../img/luban.jpg);
  background-position: center;
  background-size: cover;
  transform: rotateY(90deg) translateZ(-60px);
}

/*右*/
li:nth-child(4) {
  background: url(../img/libai.jpg);
  background-position: center;
  background-size: cover;
  transform: rotateY(90deg) translateZ(60px);
}

/*上*/
li:nth-child(5) {
  background: url(../img/kai.jpg);
  background-position: center;
  background-size: cover;
  transform: rotateX(90deg) translateZ(60px);
}

li:nth-child(6) {
  background: url(../img/sunwukong.jpg);
  background-position: center;
  background-size: cover;
  transform: rotateX(90deg) translateZ(-60px);
}

ul:hover {
  animation-play-state: paused;
}

</style>